/**
 * @description Common Container Component
 */

import React, { Fragment, Component } from 'react'
import { Breadcrumb } from 'antd'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import classNames from 'classnames'

const { Item } = Breadcrumb
// Generate breadcrumb items
const generateBreadcrumb = breadcrumb => {
  if (Array.isArray(breadcrumb)) {
    let len = breadcrumb.length
    return breadcrumb.map((item, idx) => {
      return len - 1 === idx ? (
        <Item key={item.path}>{item.breadcrumbName}</Item>
      ) : (
        <Item key={item.path}>
          <Link to={item.path} state={item.path}>
            {item.breadcrumbName}
          </Link>
        </Item>
      )
    })
  }
}
export default class Container extends Component {
  static propTypes = {
    breadcrumb: PropTypes.array,
    children: PropTypes.any,
    className: PropTypes.string
  }
  render() {
    const containerClass = classNames(
      'my-2',
      'mx-3',
      'bg-white',
      'overflow-y-auto',
      this.props.className,
      {
        'main-content-container-0': !this.props.breadcrumb,
        'main-content-container-1': this.props.breadcrumb
      }
    )
    return (
      <Fragment>
        {this.props.breadcrumb && (
          <Breadcrumb className="my-2 mx-3 bg-white p-3">
            {generateBreadcrumb(this.props.breadcrumb)}
          </Breadcrumb>
        )}
        <div className={containerClass}>{this.props.children}</div>
      </Fragment>
    )
  }
}
